<template>
	<div class='page-forget'>
		<el-form
			ref="form"
			:model="form"
			:rules="rules"
			label-width="0">
			<el-form-item prop="username">
				<el-input
					v-model="form.username"
					placeholder="用户名"
				></el-input>
			</el-form-item>
			<el-form-item prop="code">
				<div style="display: flex;">
					<el-input v-model="form.code" placeholder="验证码">
					</el-input>
					<el-button
						style="margin-left: 6px"
						type="primary"
						@click="getCode"
						:loading="getCodeLoading"
					>{{getCodeLoading ? '正在' : ''}}获取验证码
					</el-button>
				</div>
			</el-form-item>
			<el-form-item prop="password">
				<el-input v-model="form.password" placeholder="密码"></el-input>
			</el-form-item>
			<el-form-item>
				<el-button
					style="width: 100%; margin-top: 36px"
					type="primary"
					@click="confirm"
					:loading="updateLoading"
				>
					确认
				</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script>
  /**
   *
   *
   *
   */
  import Validators from "../config/validators";

  const validators = new Validators();
  export default {
    name: "forget",
    data() {
      return {
        form: {
          username: '',
          code: ''
        },
        usernameError: undefined,
        codeError: undefined,
        passwordError: undefined,
        rules: {
          username: [{required: true, message: '请输入用户名'}, {
            validator: (rule, value, callback) => {
              callback(this.usernameError)
            },
            trigger: 'change'
          }],
          code: [{required: true, message: '请输入验证码'}, {
            validator: (rule, value, callback) => {
              callback(this.codeError)
            },
            trigger: 'change'
          }],
          password: [{required: true, message: '请输入密码'}, {
            validator: (rule, value, callback) => {
              callback(this.passwordError)
            },
            trigger: 'change'
          }]
        },
        getCodeLoading: false,
        updateLoading: false
      }
    },
    watch: {
      'form.username'() {
        this.usernameError = undefined
      },
      'form.code'() {
        this.codeError = undefined
      },
      'form.password'() {
        this.passwordError = undefined
      },
      usernameError() {
        this.$refs.form && this.$refs.form.validateField('username')
      },
      codeError() {
        this.$refs.form && this.$refs.form.validateField('code')
      },
      passwordError() {
        this.$refs.form && this.$refs.form.validateField('password')
      }
    },
    mounted() {
      validators.context = this
    },
    methods: {
      getCode() {
        this.getCodeLoading = true
        this.$axios.get('/user/getCode', {
            params: {
              username: this.form.username
            }
          })
          .then(({success, message, data}) => {
            if (success) {
              this.$message.success(message)
            } else {
              if (/用户名/.test(message)) {
                this.usernameError = message
              } else {
                this.$message.error(message)
              }
            }
          })
          .catch(({message}) => {
            this.$message.error(message)
          })
          .finally(() => {
            this.getCodeLoading = false
          })
      },
      confirm() {
        this.$refs.form.validate(valid => {
          if (!valid) return false
          this.updateLoading = true
          this.$axios.post('/user/updatePassword', this.form)
            .then(({message, success, data}) => {
              if (success) {
                this.$message({
                  type: 'success',
                  message: '成功修改密码'
                })
                this.$nextTick(() => {
                  this.$router.replace('/login')
                })
              } else {
                if (/验证码/.test(message)) {
                  this.codeError = message
                } else if (/密码/.test(message)) {
                  this.passwordError = message
                } else {
                  this.$message.error(message)
                }
              }
            })
            .catch((e) => {
              this.$message.error(e.message)
            })
            .finally(() => {
              this.updateLoading = false
            })
        })
      }
    }
  }
</script>

<style lang='less'>
	.page-forget {

	}
</style>
